import React, { useState } from 'react'

export default function App() {
    let [todos, setTodos] = useState([
        {id:1,title:'吃饭'},
        {id:2,title:'睡觉'},
        {id:3,title:'玩游戏'},
        {id:4,title:'逛街'}
    ])
    return (
        <div>
            <h3>待办事项</h3>
            <ul>
                {todos.map((todo, index)=>(
                    <li key={index}>
                        {todo.title} <input type="text" name="" id="" />
                    </li>
                ))}
            </ul>
            <p><button onClick={()=>{
                setTodos([{id:5,title:'我是头'},...todos])
            }}>从头添加todo</button></p>

            <p><button onClick={()=>{
                setTodos([...todos, {id:6, title:'我是尾'}])
            }}>从尾部添加</button></p>
        </div>
    )
}
